<template>
  <a-modal :bodyStyle="{ padding: '0', 'max-height': '60vh', 'overflow-y': 'auto' }" :title="title" :width="900" :maskClosable="false" :visible="visible" @cancel="visible = false" :button_loading="button_loading">
    <a slot="footer">
      <a-button @click="visible = false">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </a>

    <a-card>
      <a-row :gutter="24">
        <a-col :md="6" :sm="24">
          <a-card hoverable style="height:600px;overflow-y:auto">
            <a-tree :showLine="true" @expand="onExpand" :expandedKeys="expandedKeys" :autoExpandParent="autoExpandParent" v-model="checkedKeys" @select="onSelect" :selectedKeys="selectedKeys" :treeData="treeData" :replaceFields="replaceFields" />
          </a-card>
        </a-col>
        <a-col :md="18" :sm="24">
          <a-spin :spinning="spinning" tip="获取数据中...">
            <div class="spin-content">
              <a-table size="small" bordered :rowKey="(record) => record.id" :columns="columns" :dataSource="tableList" :rowSelection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
    }">

              </a-table>
            </div>
          </a-spin>
        </a-col>
      </a-row>
    </a-card>
  </a-modal>
</template>

<script>

import {
  getRoomList,
  getRoomByID,
  saveRoom,
  deleteRoomByIds,
  getBuildingTree
} from "@/api/allApi";
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import '@/views/treeselect1.css'

const columns = [
  {
    title: "房间名",
    dataIndex: "roomName",
    key: "roomName",
    align: "center",
  },
  {
    title: "小区",
    dataIndex: "ResidentialAreaName",
    key: "ResidentialAreaName",
    align: "center",
  },
  {
    title: "楼幢",
    dataIndex: "BuildingName",
    key: "BuildingName",
    align: "center",
  },
  {
    title: "所属楼层",
    dataIndex: "floor",
    key: "floor",
    align: "center",
  },
  {
    title: "水表编号",
    dataIndex: "waterMeter",
    key: "waterMeter",
    align: "center",
  },
  {
    title: "电表编号",
    dataIndex: "electricityMeter",
    key: "electricityMeter",
    align: "center",
  },

  // {
  //   title: "最后修改日期",
  //   dataIndex: "updateTime",
  //   key: "updateTime",
  //   align: "center",
  // },

];

export default {
  props: {},
  data () {
    return {
      columns,
      form: this.$form.createForm(this),
      title: "选择关联房间",
      visible: false,
      button_loading: false,
      ParentName: null,
      userList: [],
      residentialAreaID: '',
      queryParam: {
        index: 1,
        pageSize: 999,
        buildingID: '',
      },
      autoExpandParent: true,
      expandedKeys: [],

      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      replaceFields: {
        children: 'Childrens', title: 'name', key: 'id'
      },
      spinning: false,
      selectedRowKeys: [],
      selectedRows: [],
      tableList: [],
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize);
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: "small",
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize);
        },
        position: "bottom",
      },

    };
  },
  watch: {
    // 'radioSelect' (val) {
    //   this.radioSelect = val
    // },
  },
  created () {
    getBuildingTree().then(res => {
      console.log(res)
      this.treeData = res.data
    })
  },
  mounted () {
  },
  methods: {
    view () {
      this.visible = true;
      this.selectedRowKeys = []
      this.initData(this.queryParam)
    },
    async initData (params) {
      this.spinning = true;
      const { data, message, page } = await getRoomList({ ...params });
      this.pagination.total = page.RecordCount;
      this.tableList = data;
      this.tableList.map((a) => {
        a.notificationTime = this.$moment(a.notificationTime).format('YYYY-MM-DD');
        a.addTime = this.$moment(a.addTime).format('YYYY-MM-DD HH:mm:ss');
        a.updateTime = this.$moment(a.updateTime).format('YYYY-MM-DD HH:mm:ss');
        // a.isExamine = a.isExamine === true ? "是" : "否";
        // a.isComplete = a.confirmUserID > 0 ? "是" : "否";
      });
      this.spinning = false;
    },
    onSelect (selectedKeys, e) {
      console.log('onSelect', e.selectedNodes[0])
      if (e.selectedNodes[0].data.props.parentId) {
        this.residentialAreaID = e.selectedNodes[0].data.props.parentId - 1000000
        this.queryParam.buildingID = e.selectedNodes[0].data.props.id
      } else {
        this.residentialAreaID = e.selectedNodes[0].data.props.id - 1000000

      }
      this.selectedKeys = selectedKeys
      this.ParentId = selectedKeys[0]
      this.initData(this.queryParam)
    },

    onSelectChange (selectedRowKeys, selectedRows) {
      console.log(11111, selectedRowKeys)
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },

    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    }, closeModal () {
      this.visible = false;
    },
    handleSubmit () {
      this.$emit("save", this.selectedRows);

    },
  },
};
</script>

<style lang="less">
.select_div {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 5px;
  border: 1px solid #dddddd;
  margin-bottom: 15px;
  // line-height: 35px;cursor: pointer;
  &.select_border {
    border: 1px solid blue;
  }
}
</style>
